<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="wa">
    <title></title>
    <script src="../js/jquery-3.1.1.js"></script>
    <style>
        #top{
            width: 400px;
            margin: 100px auto;
            position: relative;
        }
        .xf{
            width: 100px;
            height: 40px;
            background-color: #91ed8b;
            display: inline-block;
            line-height: 40px;
            text-align: center;
        }
        .bt{
            display: inline-block;
            position: absolute;
            top:0px;
        }
        .bt .neir{
            display: inline-block;
            width: 200px;
            height: 40px;
            background-color: #d3d3d3;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
        }
        .bt ul{
            padding: 0;
            margin: 0;
            border: 1px solid red;
            display: none;
        }
        .bt li{
            list-style-type: none;
            padding: 10px 0;
            text-align: center;
            border-bottom: 1px dotted red;
            cursor: pointer;
        }
        .bt li:hover{
            background-color: #d3d3d3;
        }
    </style>
</head>
<body>
    <div id="top">
        <div class="xf">选择项目：</div>
        <div class="bt">
            <div class="neir">未选择</div>
            <ul>
                <li>html5</li>
                <li>css3</li>
                <li>JavaScript</li>
                <li>jQuery</li>
            </ul>
        </div>
    </div>
</body>
</html>
<script>

    $('.neir').click(function(){
        $('.bt ul').css('display','block');
        $('.bt li').click(function(){
            $('.neir').text($(this).text());
            $('.bt ul').css('display','none');
        }); 
    });

    $('ul').mouseleave(function(){
        $(this).css('display','none');
    })

</script>